<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DotMatrix</title>
    <script src="./vue.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>

    <link rel="stylesheet" type="text/css" href="dotMartrix.css">
</head>
<body>
<div id="app">
    <div class="my-panel">
        <select @change="dotMatrixParamSelect">
            <option v-for="param in dotMatrixParam">{{param.width}}*{{param.height}}</option>
        </select>
        <button v-on:click="btnClear">Clear</button>
        <button v-on:click="btnOk">OK</button>
    </div>
    <div class="my-panel LeftFloat">
        <span class="MatrixElem MatrixLabel" v-for="n in matrix_width">{{matrix_width - n}}</span>
        <div class="DotRow" ref="DotRow" v-for="h in matrix_height">
            <span ref="Dot" class="Dot MatrixElem" v-for="w in matrix_width" v-on:click="clickDot">{{ 0 }} </span>
        </div>
    </div>
    <div class = "my-panel LeftFloat">
        <p>output:</p>
        <textarea ref="OutputArea" class = "OutputArea"></textarea>
    </div>
</div>
</body>
<script src="dotMartrix.js"></script>
</html>
